﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>梦然压缩</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
</head>
<body>


    <blockquote class="layui-elem-quote layui-text">
        选择框是选择压缩的比例，最小为10（占用空间最小），最大为90（占用空间最大），一般推荐20~50之间
        <br />使用方式：选择好压缩参数，然后上传图片即可
        <br />压缩图片接口：https://地址：端口/Home/api/pto/UpLoad。请求方式Post，压缩大小默认10
    </blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>常规使用：普通图片压缩</legend>
    </fieldset>
    <div class="layui-form" action="">
        <div class="demoTable">
            压缩参数：
            <div class="layui-input-inline">
                <select id="size">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
                    <option value="60">60</option>
                    <option value="70">70</option>
                    <option value="80">80</option>
                    <option value="90">90</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-upload" style="float:left">
        <button type="button" class="layui-btn" id="test1">上传原图</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" style="height:30%;width:22%">
            <p id="demoText"></p>
        </div>
        <div style="width: 95px;">
            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                <div class="layui-progress-bar" lay-percent=""></div>
            </div>
        </div>
    </div>

    <div>
        <button type="button" class="layui-btn" id="test1">压缩后图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo2" style="height:30%;width:22%">
        </div>
    </div>

    <a name="list-progress"> </a>

    <div style="margin-top: 10px;">

        <!-- 示例-970 -->
        <!--
        <ins class="adsbygoogle"
        style="display:inline-block;width:970px;height:90px"
        data-ad-client="ca-pub-6111334333458862"
        data-ad-slot="3820120620"></ins>
        -->

    </div>

    <!-- 注意：项目正式环境请勿引用该地址 -->
    <script src="~/lib/layui/layui.js" charset="utf-8"></script>

    <script src="~/js/yasuopto.js"></script>
    <script>
        //Cookie设置值
        function writeCookie(name, value, hours) {
            var expire = "";
            if (hours != null) {
                expire = new Date((new Date()).getTime() + hours * 3600000);
                expire = "; expires=" + expire.toGMTString();
            }
            document.cookie = name + "=" + escape(value) + expire;
        }
        document.getElementById("test1").addEventListener("click", function () {
            var sizes = document.getElementById("size").value;
            writeCookie('size', sizes);
        })
    </script>
</body>
</html>